import { Layout } from "@/components/layout.tsx";
import { Outlet, useLocation } from "react-router-dom";
import { observer } from "mobx-react";
import { Icon } from "@/components/icon.tsx";
import { useEffect } from "react";
import * as echarts from "echarts";

export const Home = function () {
	const location = useLocation();
	return (
		<>
			<Layout>
				{location.pathname == "/home" && <HomeMain />}
				<Outlet />
			</Layout>
		</>
	);
};

//home页面的主要展示组件
const HomeMain = observer(() => {
	const topItem: Array<{ title: string; num: number; iconName: string }> = [
		{
			title: "在线人数",
			num: 100,
			iconName: "icon-a-gerenyonghu",
		},
		{
			title: "消息数量",
			num: 189,
			iconName: "icon-a-duihuaduanxinxinxiliaotian",
		},
		{
			title: "群组数量",
			num: 100,
			iconName: "icon-qunliaosvg",
		},
	];
	return (
		<>
			<div className="w1200 mt20 ml-a mr-a">
				<HomeTop />
				<div className="w-full h130 flex flex-justify-around">
					{topItem.map((item, index) => {
						return (
							<BannerItem title={item.title} num={item.num} iconName={item.iconName} key={index} />
						);
					})}
				</div>
				<ChartComponent />
			</div>
		</>
	);
});

// 顶部欢迎组件
const HomeTop = () => {
	return (
		<>
			<div className="w-full h190 flex flex-items-center bg-[url(/登录提示banner.png)] bg-cover bg-center bg-no-repeat">
				<div className="w80 h80 b-rd-50% ml45 bg-[url(/avatar.jpg)] bg-cover bg-center bg-no-repeat"></div>
				<div className="mb-a">
					<div className="color-white font-size-24 mt50 mb-a">宵宫你好,欢迎登录本平台</div>
					<div className="color-#fff">这是一个Im在线通信平台，用于用户之间的在线通信</div>
				</div>
			</div>
		</>
	);
};

//顶部数据展示组件
const BannerItem = observer((props: any) => {
	let { title, num, iconName } = props;
	return (
		<div className="w260 h100 bg-#fff flex flex-items-center b-rd-8 mt20">
			<div className="w100 h50 flex flex-items-center flex-justify-center flex-col ">
				<Icon iconName={iconName} className="w50 h50 flex-shrink-0" />
				<div className="font-size-14">{title}</div>
			</div>
			<div className="ml20 font-size-48">{num}</div>
		</div>
	);
});

//echarts图表
const ChartComponent = () => {
	useEffect(() => {
		const options = {
			title: {
				text: "Im在线通信平台数据统计",
			},
			tooltip: {
				trigger: "axis",
			},
			// legend: {
			// 	data: ["用户数量", "群组数量", "消息数量", "活跃人数"],
			// },
			grid: {
				left: "3%",
				right: "4%",
				bottom: "3%",
				containLabel: true,
			},
			toolbox: {
				feature: {
					saveAsImage: {},
				},
			},
			xAxis: {
				data: ["12", "27", "78", "89", "100", "134", "456"],
				axisLine: {
					show: false,
				},
				axisTick: {
					show: false,
				},
			},
			yAxis: {
				type: "value",
				splitLine: false,
				axisTick: {
					show: false,
				},
				axisLine: {
					show: false,
				},
				axisLabel: {
					show: false,
				},
			},
			series: [
				{
					data: [150, 230, 50, 70, 224, 218, 135, 147, 260, 340, 20],
					type: "line",
					smooth: true,
					symbol: "none",
					itemStyle: {
						normal: {
							lineStyle: {
								color: "#e5566a",
							},
						},
					},
					areaStyle: {
						color: {
							type: "linear",
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{
									offset: 0,
									color: "#e5566a",
								},
								{
									offset: 1,
									color: "rgba(255, 203, 203, 0.1)",
								},
							],
							global: false,
						},
					},
				},
			],
		};

		// 基于准备好的dom，初始化echarts实例
		const myChart = echarts.init(document.getElementById("chart"));

		// 使用刚指定的配置项和数据显示图表
		myChart.setOption(options);

		// 在组件卸载时销毁echarts实例，防止内存泄漏
		return () => {
			myChart.dispose();
		};
	}, []); // 空数组表示仅在组件挂载时运行一次

	return <div id="chart" className="w-full h250 mt30" />;
};
